<template>
  <ele-page flex-table style="padding: 0 0 0 5px;">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      v-model:selections="selections"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      :pagination="false"
      highlight-current-row
      :default-expand-all="false"
      cache-key="MchArchivesWarehouseLocTable"
    >
      <template #toolbar>
        <el-button type="primary" class="ele-btn-icon" :icon="Plus" @click="openEdit()">
          新增
        </el-button>
        <el-button type="primary" plain class="ele-btn-icon" :icon="Plus" @click="showBatch = true">
          批量新增
        </el-button>
        <el-divider direction="vertical" />

        <el-button
          class="ele-btn-icon"
          :icon="ColumnHeightOutlined"
          @click="expandAll"
        >
          展开全部
        </el-button>
        <el-button
          class="ele-btn-icon"
          :icon="VerticalAlignMiddleOutlined"
          @click="foldAll"
        >
          折叠全部
        </el-button>
      </template>
      <template #status="{ row }">
        <el-tag v-if="row.status === 1">正常</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
      <template #action="{ row }">
        <ComActions :key="row">
          <el-link v-if="row.level < 3" type="primary" underline="never" @click="openEdit({ pid: row.id })">
            新增子级
          </el-link>
          <el-link type="primary" underline="never" @click="openEdit(row)">
            编辑
          </el-link>
          <el-link type="danger" underline="never" @click="remove(row)">
            删除
          </el-link>
        </ComActions>
      </template>
    </ele-pro-table>
    <PageEdit
      v-model="showEdit"
      :data="current"
      :warehouseId="warehouseId"
      :typeList="typeList"
      :treeSelect="treeSelect"
      @done="reload"
    />
    <PageBatch
      v-model="showBatch"
      :warehouseId="warehouseId"
      :typeList="typeList"
      @done="reload"
    />
  </ele-page>
</template>

<script setup>
import {
  ColumnHeightOutlined,
  VerticalAlignMiddleOutlined,
} from '@/components/icons'
import { Plus } from '@element-plus/icons-vue'
import { toTree } from 'ele-admin-plus/es'

import { ref } from 'vue'

import PageBatch from './batch.vue'
import PageEdit from './edit.vue'

const props = defineProps({
  warehouseId: Number,
})

/** 表格实例 */
const tableRef = useTemplateRef('tableRef')

/** 表格选中数据 */
const selections = ref([])

/** 当前编辑数据 */
const current = ref({})

const treeSelect = ref([])

const [typeList] = utils.useGetList('/common/wlType')

/** 是否显示编辑弹窗 */
const showEdit = ref(false)
/** 是否显示批量新增弹窗 */
const showBatch = ref(false)

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 55,
    align: 'left',
    fixed: 'left',
  },
  {
    prop: 'name',
    label: '仓库名称',
  },
  {
    prop: 'type_name',
    label: '类型',
    align: 'center',
  },
  {
    slot: 'status',
    label: '状态',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    prop: 'create_time',
    label: '创建时间',
    sortable: 'custom',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
  },
  {
    prop: 'update_time',
    label: '更新时间',
    sortable: 'custom',
    formatter: (row) => {
      return row.update_time ? utils.formatDate(row.update_time) : '-'
    },
    align: 'center',
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'right',
    slot: 'action',
    fixed: 'right',
  },
])

/** 表格数据源 */
async function datasource({ where, orders }) {
  const res = await utils.get('/warehouseLocation/index', { ...where, ...orders, warehouse_id: props.warehouseId })
  treeSelect.value = toTree({
    data: res.data.filter(v => v.level < 3),
    idField: 'id',
    parentIdField: 'pid',
  })
  return toTree({
    data: res.data,
    idField: 'id',
    parentIdField: 'pid',
  })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

/** 展开全部 */
function expandAll() {
  tableRef.value?.toggleRowExpansionAll?.(true)
}

/** 折叠全部 */
function foldAll() {
  tableRef.value?.toggleRowExpansionAll?.(false)
}

/** 打开编辑弹窗 */
function openEdit(row) {
  current.value = row ?? null
  showEdit.value = true
}

/** 删除单个 */
function remove(row) {
  utils.confirm(
    `确定要删除“${row.name}”吗?`,
    '系统提示',
    { type: 'warning', draggable: true },
  )
    .then(() => {
      const loading = utils.message('请求中..', 'loading')
      utils.post('/warehouseLocation/delete', { id: row.id, warehouse_id: row.warehouse_id })
        .then((res) => {
          utils.message(res.msg, res.success)
          reload()
        })
        .finally(() => loading.close())
    })
    .catch(() => {})
}

// 监听字典id变化
watch(
  () => props.warehouseId,
  () => {
    reload({})
  },
)
</script>
